<template>
  <div class="overview-wrap">
    <div class="right">
      <el-radio-group v-model="radio">
        <el-radio-button label="1">{{ $t('model.today') }}</el-radio-button>
        <el-radio-button label="2">{{ $t('model.last3') }}</el-radio-button>
        <el-radio-button label="3">{{ $t('model.lastWeek') }}</el-radio-button>
      </el-radio-group>
    </div>
    <h5>{{ $t('model.overview') }}</h5>
    <div class="static-group">
      <template v-for="item in staticList">
        <div :key="item.dataTitle" style="cursor:pointer">
          <i class="iconfont icon-static"></i>
          <div>
            <p class="static-label">{{ item.dataTitle }}
              <el-popover placement="top-start" width="200" trigger="hover"
                :content="item.dataDesc">
                <i slot="reference" class="el-icon-question"></i>
              </el-popover>
            </p>
            <p class="static-total">{{ item.dataValue }}</p>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import bus from "@/bus/bus"
export default {
  name: "overview",
  data() {
    return {
      radio: "1",
      date: "",
      staticList: [
        {dataTitle:"收货单",dataValue:"0",desc:""},
        {dataTitle:"退货订单",dataValue:"0",desc:""},
        {dataTitle:"上架件数",dataValue:"0",desc:""},
        {dataTitle:"出库订单",dataValue:"0",desc:""},
        {dataTitle:"出库件数",dataValue:"0",desc:""},
        {dataTitle:"库存件数",dataValue:"0",desc:""},
        {dataTitle:"库存SKU",dataValue:"0",desc:""},
      ]
    }
  },
  methods: {
    getData() {
      const startDate = this.date[0];
      const endDate = this.date[1];
      this.$post("/dataMainDataPanel/selectDataMainDataPanelList", { startDate, endDate }).then(res => {
      
          this.staticList = res.data;
          bus.$emit('updateOverView')
        
      })
    }
  },
  watch: {
    radio: {
      handler(val) {
        if (val == 1) {
          this.date = [this.moment().format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')];
        } else if (val == 2) {
          this.date = [this.moment().subtract(3, 'd').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')];
        } else if (val == 3) {
          this.date = [this.moment().subtract(7, 'd').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')];
        }
        this.getData()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

.static-group {
  display: flex;
  flex-wrap: wrap;

  &>div {
    overflow: hidden;
    width: 160px;
    padding: 10px;
  }

  .iconfont {
    font-size: 24px;
    float: left;
    width: 40px;
    padding: 0 10px;
    background: #108eff;
    border-radius: 60px;
    color: #fff;
  }

  .static-label {
    color: #a1a2a3;
  }

  .static-total {
    font-size: 28px;
    color: #2e2b39;
  }
}
</style>